<!-- 维保详情 -->
<template>
    <div class="page maintainInspectDetail-page" id="maintainInspectDetail-page_{{getNewId}}" data-page="maintainInspectDetail" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-list-title">维保详情</div>
            <a href="#" @click="buildDetail()" class="btn-buildDetail">
                <i class="iconfont icon-APPicon_loudongshitu" style="font-size: 24px"></i>
            </a>
        </div>
        <div class="page-content ptr-content pdbottom120" @ptr:refresh="refreshCurrent">
            <div class="ptr-preloader" style="top: -40px;">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <div class="mChart" id="mChart_{{getNewId}}"></div>
            <div class="mChartInfo" id="mChartInfo_{{getNewId}}">
                <label>完成进度</label>
                <div><span class="pre-num" id="preNum_{{getNewId}}">0<span><span class="pre-fh">%</span></div>
                <div class="bfb"><span style="color:#777" id="finNum_{{getNewId}}">0</span>/<span id="total_{{getNewId}}">0</span></div>
            </div>
            <div class="content-panels" style="margin-top:0">
                <div class="sta_time">
                    <span id="status_{{getNewId}}"></span>
                    <span class="marginl" id="residueTime_{{getNewId}}"></span>
                </div>
                <p class="tt" style="margin-bottom:0;font-weight: bold;" id="taskName_{{getNewId}}"></p>
                <div class="unit-name">
                    <i class="iconfont icon-APPicon_dingwei" style="color:#2471CA;font-size: 14px;"></i>
                    <label id="unitName_{{getNewId}}"></label>
                </div>
                <div class="turn-time">
                    <span class="iteml">时间周期</span>
                    <span class="itemr" id="planTime_{{getNewId}}"></span>
                </div>
            </div>
            <div class="bottom-line"></div>

            <div class="content-panels" id="residualTask_{{getNewId}}">
                <p class="tt">剩余作业</p>
                <div class="pdb10">
                    <a href="#" @click="maintainEqu(1)" style="display: block;">
                        <span class="iteml">待保养资产数量</span>
                        <span class="itemr" style="color:#397ECE;" id="waitWork_{{getNewId}}">0</span>
                    </a>
                </div>
                <p class="iteml">待作业区域</p>
                <div id="waitAreaItem_{{getNewId}}" class="pdb10">
                </div>
            </div>
            <div class="content-panels" id="finshTask_{{getNewId}}">
                <p class="tt">已完成作业</p>
                <div class="pdb10">
                    <a href="#" @click="maintainEqu(2)" style="display: block;">
                        <span class="iteml">已完成保养资产数量</span>
                        <span class="itemr" style="color:#397ECE;" id="assetsFinshNum_{{getNewId}}">0</span>
                    </a>
                </div>
                <div class="pdb10">
                    <a href="#" @click="picDetail(1)" style="display:block">
                        <span class="iteml">已上传作业前照片</span>
                        <span class="itemr"><i class="icon iconfont icon-jiantou beforePicLen"></i> <span class="beforePicNull" style="display: none;color:#397ECE;">0</span></span>
                    </a>
                </div>
                <div class="pic-panels" id="beforPic_{{getNewId}}"></div>
                <div class="pdb10">
                    <a href="#" @click="picDetail(2)" style="display:block">
                        <span class="iteml">已上传作业后照片</span>
                        <span class="itemr"><i class="icon iconfont icon-jiantou afterPicLen"></i><span class="afterPicNull" style="display: none;color:#397ECE;">0</span></span>
                    </a>
                </div>
                <div class="pic-panels" id="afterPic_{{getNewId}}"></div>
            </div>

            <div class="content-panels" style="margin-top:0">
                <div>
                    <span class="tt">任务责任人</span>
                    <a href="#" id="addMan_{{getNewId}}" @click="addMan()">
                        <span class="itemr" style="color: #397ECE">
                            <i class="iconfont icon-APPicon_tianjia" style="color: #397ECE;margin-right:4px;font-size: 14px;"></i>添加责任人
                        </span>
                    </a>
                </div>
                <div id="manInspectListItem_{{getNewId}}" style="display: inline-block; width: 100%;"></div>
            </div>

            <div class="content-panels">
                <p class="tt" style="margin-bottom:20px">作业内容</p>
                <p class="work-content" id="workContent_{{getNewId}}"></p>
            </div>
            <div class="bottom-line"></div>

            <div class="content-panels">
                <p class="tt" style="margin-bottom:20px">作业标准</p>
                <p class="work-content" id="workStandard_{{getNewId}}"></p>
            </div>
            <div class="bottom-line"></div>

            <div id="timeLine_{{getNewId}}">
                <div class="content-panels">
                    <p class="tt" style="margin-bottom:15px">任务完成时间线</p>
                    <a href="#" @click="timeLine()" style="display:block">
                        <span class="iteml">立即查看</span>
                        <span class="itemr"><i class="icon iconfont icon-jiantou"></i></span>
                    </a>
                </div>
                <div class="bottom-line"></div>
            </div>

            <div id="repairList_{{getNewId}}">
                <div class="content-panels">
                    <p class="tt" style="margin-bottom:15px">关联的故障维修单</p>
                    <a href="#" style="display:block" @click="goRepairList()">
                        <span class="iteml">立即查看</span>
                        <span class="itemr"><i class="icon iconfont icon-jiantou"></i></span>
                    </a>
                </div>
                <div class="bottom-line"></div>
            </div>

            <div class="content-panels">
                <p class="tt" style="margin-bottom:15px">关联的作业申请单</p>
                <a href="#" style="display:block" @click="workApply">
                    <span class="iteml">立即查看</span>
                    <span class="itemr"><i class="icon iconfont icon-jiantou"></i></span>
                </a>
            </div>
        </div>
        <!-- 二维码 -->
        <div class="add-keyAlarm" @click="scanning" style="display:none" id="maintainInsScanner_{{getNewId}}">
            <!-- <a href="" class="link icon-only" data-view=".view-main" style="display: none;">
                <span style="font-size: 12px;width:24px;color:#fff;margin-top:7px;">作业申请</span>
            </a> -->
            <i class="iconfont icon-weibiaoti--2" id="qrButton_{{getNewId}}" style="display: none;font-size: 50px;left: 0;top: -13px;"></i>
        </div>
    </div>
</template>

<script>
    return {
        mounted() {
            let self = this;
            let app = self.$app;
            self.taskId = this.$route.params.taskId;
            self.jumpFromPage = this.$route.params.pageName;
        },
        data: function () {
            return {
                getNewId: (new Date()).getTime(),
                pageName: "maintainInspectDetail",
                orgIds: 0,
                orgName: "",
                taskName: "",
                status: 0,
                taskId: '',
                jumpFromPage: "",
                saveResponsPeople: [], // 保存责任人
                relateTaskList: {},
                workAcoountsStatus: 0, //状态：0：表示未开始，1：表示开始，是当前用户已加入2：表示已开始，当前用户未加入
            }
        },
        methods: {
            //原生扫一扫
            scanning: function () {
                var self = this;
                if (self.taskStatus == 1) {
                    //作业申请
                    var jsonTask = JSON.stringify(self.relateTaskList);
                    app.router.navigate("/workApplyCreate/" + self.taskId + "/" + jsonTask + "/");
                } else {
                    native.scanQrCode();
                }
            },
            //原生扫一扫回调
            scanningreciviceLocation: function (qRcode) {
                var self = this;
                Dao.scanVCodeResult({
                    taskId: self.taskId,
                    qrCode: qRcode,
                    maintainType: 1 //1 维保巡查任务 2保养任务 3测试任务 4联动测试任务
                }, function (data) {
                    if (data.status == 200) {
                        var id = data.data.businessId;
                        var type = data.data.businessType;
                        app.router.navigate("/maintainInspectTask/" + self.taskId + "/" + id + "/" + type + "/");
                    } else {
                        custom.tipSimple(3, data.info);
                    }
                });
            },
            //跳转照片墙
            picDetail: function (type) {
                let self = this;
                if(native.getDataByKey("IS_OFFLINE_MODULE") == 1){
					app.methods.showToastCenter("离线模式下不能跳转");
					return
				}else{
					app.router.navigate("/maintainDetailPic/"+self.taskId+"/"+type + "/")
				}
            },
            //跳转时间线
            timeLine: function () {
                let self = this;
                if(native.getDataByKey("IS_OFFLINE_MODULE") == 1){
                    app.methods.showToastCenter("离线模式下不能跳转");
					return
				}else{
					app.router.navigate("/maintainDetailTimeLine/" + self.taskId + "/1/");
				}
            },
            //跳转添加责任人
            addMan: function () {
                let self = this;
                if(native.getDataByKey("IS_OFFLINE_MODULE") == 1){
					app.methods.showToastCenter("离线模式下不能跳转");
					return
				}else{
					if (self.saveResponsPeople.length == 0) {
                        self.saveResponsPeople.push(0);
                    }
                    app.router.navigate("/maintainOwner/" + self.orgIds + "/" + self.taskId + "/maintainInspectDetail/" + self.saveResponsPeople.toString());
				}
            },
            //跳转楼栋视图
            buildDetail: function () {
                let self = this;
                app.router.navigate("/allBuild/maintainInspectDetail/" + self.taskId + "/" + self.orgName + "/" + encodeURIComponent(self.taskName) + "/" + self.status + "/" + self.orgIds + "/");
            },
            //跳转作业申请
            workApply: function () {
                var self = this;
                if(native.getDataByKey("IS_OFFLINE_MODULE") == 1){
                    app.methods.showToastCenter("离线模式下不能跳转");
					return
				}else{
					app.router.navigate("/workApplyList/" + self.taskId + "/");
				}
            },
            //保养设备 资产
            maintainEqu: function (status) {
                var self = this;
                if(native.getDataByKey("IS_OFFLINE_MODULE") == 1){
					app.methods.showToastCenter("离线模式下不能跳转");
					return
				}else{
					app.router.navigate("/maintainEquipt/" + self.taskId + "/"+status+"/");
				}
            },
            goRepairList: function (type) { //跳转关联故障单
                var self = this;
                if(native.getDataByKey("IS_OFFLINE_MODULE") == 1){
                    app.methods.showToastCenter("离线模式下不能跳转");
					return
				}else{
					app.router.navigate("/repairList/" + self.taskId + "/");
				}
            },
            getTestTaskStatus: function () { //获取当前用户任务状态
                var self = this;
                common.loading(1);
                Dao.getTestTaskStatus({
                    userName: userInfor.accountName,
                    account: userInfor.accountName,
                    taskId: self.taskId, //任务id
                    type: 1, //type维保类型 1 维保巡查任务 2保养任务 3测试任务 4联动测试任务
                }, function (data) {
                    self.workAcoountsStatus = data.status;
                    self.getInfoData();
                });
            },
            //获取任务信息
            getInfoData: function () {
                let self = this;
                //$("#residualTask_" + self.getNewId).hide();
                $("#finshTask_" + self.getNewId).hide();
                $("#timeLine_" + self.getNewId).hide();
                $("#repairList_" + self.getNewId).hide();
                $("#addMan_" + self.getNewId).hide();
                Dao.getMaintainTaskInfoDto({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    taskId: self.taskId, //任务id
                }, function (data) {
                    common.loading(0);
                    if (data) {
                        self.buildRelateTask(data);
                        self.orgIds = data.orgId;
                        self.orgName = data.orgName;
                        self.taskName = data.name;
                        self.status = data.status;
                        self.taskStatus = data.status;
                        if (self.taskStatus == 1) {
                            $("#residualTask_" + self.getNewId).show();
                            if (userInfor.role[0].id == 183 || userInfor.role[0].id == 184)
                                $("#addMan_" + self.getNewId).show();
                        } else if (self.taskStatus == 2) {
                            $("#residualTask_" + self.getNewId).show();
                            $("#finshTask_" + self.getNewId).show();
                            $("#timeLine_" + self.getNewId).show();
                            $("#repairList_" + self.getNewId).show();
                            if (userInfor.role[0].id == 183 || userInfor.role[0].id == 184)
                                $("#addMan_" + self.getNewId).show();
                        } else {
                            $("#finshTask_" + self.getNewId).show();
                            $("#timeLine_" + self.getNewId).show();
                            $("#repairList_" + self.getNewId).show();
                        }

                        let finCount = 0;
                        if (data.finishCount) {
                            finCount = data.finishCount;
                        }
                        //let percent = (finCount / data.assetsCount * 100).toFixed(2);
                        let percent = finCount / data.assetsCount * 100;
                        if (percent == 0 || percent == 100) {
                            percent = percent;
                        } else {
                            percent = percent.toFixed(2);
                        }
                        self.initChart(percent);
                        $("#preNum_" + self.getNewId).empty().html(common.transNullundefinedToline(percent + "%"));
                        $("#finNum_" + self.getNewId).empty().html(common.transNullundefinedToline(finCount + ""));
                        $("#total_" + self.getNewId).empty().html(common.transNullundefinedToline(data.assetsCount));
                        let staStr;
                        if (data.status == 1) {
                            staStr = "未开始";
                        } else if (data.status == 2) {
                            staStr = "进行中";
                        } else {
                            if (parseInt(percent) == 100) {
                                staStr = "已结束&nbsp;&nbsp;<span>已完成</span>";
                            } else {
                                staStr = "已结束&nbsp;&nbsp;<span style='color:#E07762'>未完成</span>";
                            }
                        }
                        $("#status_" + self.getNewId).html(common.transNullundefinedToline(staStr));
                        if (data.status != 3) {
                            $("#residueTime_" + self.getNewId).html(toEndTime(data.endTime)); //剩余365天
                        } else {
                            $("#residueTime_" + self.getNewId).hide();
                        }
                        $("#taskName_" + self.getNewId).html(common.transNullundefinedToline(self.taskName));
                        $("#unitName_" + self.getNewId).html(common.transNullundefinedToline(self.orgName));
                        $("#planTime_" + self.getNewId).html(common.transNullundefinedToline(moment(data.startTime.substring( 0, 10)).format('YYYY/MM/DD') + " ~ " + moment(data.endTime
                            .substring(0, 10)).format('YYYY/MM/DD')));
                        $("#waitWork_" + self.getNewId).html(common.transNullundefinedToline((data.assetsCount - finCount) + ""));
                        /*$("#waitAreaItem_" + self.getNewId).html(common.transNullundefinedToline(data.residueWorkPlaceList));*/
                        $("#waitAreaItem_" + self.getNewId).html( data.residueWorkPlaceList==null?'无':(data.residueWorkPlaceList) );
                        $("#assetsFinshNum_" + self.getNewId).html(common.transNullundefinedToline(finCount + ""));
                        let beforePicList = data.beforeWorkPicList;
                        let afterPicList = data.afterWorkPicList;
                        if(JSON.stringify(beforePicList)==='{}'){
                            $("#beforPic_" + self.getNewId).hide()
                            jQuery('.beforePicNull').show()
                            jQuery('.beforePicLen').hide()
                        }else{
                            $("#beforPic_" + self.getNewId).show()
                            jQuery('.beforePicLen').show()
                        }
                        if(JSON.stringify(afterPicList)==='{}'){
                            jQuery('.afterPicNull').show()
                            jQuery('.afterPicLen').hide()
                            $("#afterPic_" + self.getNewId).hide()
                        }else{
                            jQuery('.afterPicLen').show()
                            $("#afterPic_" + self.getNewId).show()
                        }
                        $("#beforPic_" + self.getNewId).empty();
                        let picArr = [];
                        for (let key in beforePicList) {
                            let picUrls = beforePicList[key];
                            let picAarr = picUrls.split(',');
                            picArr = picArr.concat(picAarr);
                        }
                        //展示图片
                        showImage(jQuery("#beforPic_" + self.getNewId), picArr.toString(), 3);

                        $("#afterPic_" + self.getNewId).empty();
                        let picArr1 = [];
                        for (let key in afterPicList) {
                            let picUrls = afterPicList[key];
                            let picAarr = picUrls.split(',');
                            picArr1 = picArr1.concat(picAarr);
                        }
                        //展示图片
                        showImage(jQuery("#afterPic_" + self.getNewId), picArr1.toString(), 3);

                        let userList = data.dutyUserList;
                        let userHtml = "";
                        var maintainAccount = ""; //用于判断当前登录人是否责任人
                        self.saveResponsPeople = [];
                        $("#manInspectListItem_" + self.getNewId).empty();
                        if (userList) {
                            for (let i = 0; i < userList.length; i++) {
                                self.saveResponsPeople.push(userList[i].accountName);
                                maintainAccount += userList[i].accountName;
                                let phoneNum = userList[i].phone;
                                if (i % 2 == 0) {
                                    userHtml += `<div class="area-panels">
                                                    <a href="tel:` + phoneNum + `" onclick="window.location='tel:`+phoneNum+`'">
                                                    <p>` + userList[i].name + ` <i class="iconfont icon-phone-channel phone"></i></p>
                                                    <p class="area" style="color:#999">` + (userList[i].postName ? userList[i].postName : "-") + `</p>
                                                    </a>
                                                </div>`
                                } else {
                                    userHtml += `<div class="area-panels" style="margin-right:0">
                                                <a href="tel:` + phoneNum + `" onclick="window.location='tel:`+phoneNum+`'">
                                                    <p>` + userList[i].name + ` <i class="iconfont icon-phone-channel phone"></i></p>
                                                    <p class="area" style="color:#999">` + (userList[i].postName ? userList[i].postName : "-") + `</p>
                                                    </a>
                                                </div>`
                                }
                            }
                            $("#manInspectListItem_" + self.getNewId).append(userHtml);
                        } else {
                            //$("#manInspectListItem_" + self.getNewId).hide();
                        }
                        if (self.taskStatus < 3 && maintainAccount.indexOf(userInfor.accountName) >= 0) { //当前登录人是责任人
                        	$("#addMan_" + self.getNewId).show();
                            if(self.workAcoountsStatus == 1)
                            	jQuery("#maintainInsScanner_" + self.getNewId).show();
                        } else {
                            jQuery("#maintainInsScanner_" + self.getNewId).hide();
                        }
                        let contentList = data.maintainStandardContentList;
                        let workContentStr = "";
                        for (let i = 0; i < contentList.length; i++) {
                            if ((i + 1) != contentList.length) {
                                workContentStr += contentList[i].workContent + "；"
                            } else {
                                workContentStr += contentList[i].workContent + "。"
                            }
                        }
                        $("#workContent_" + self.getNewId).empty().html(common.transNullundefinedToline(workContentStr));
                        $("#workStandard_" + self.getNewId).empty().html(common.transNullundefinedToline(data.workStandard));

                        //未开始详情
                        if (self.taskStatus == 1) {
                            $("#qrButton_" + self.getNewId).hide();
                            //$("#testButton_" + self.getNewId).show();
                        } else {
                            //$("#testButton_" + self.getNewId).hide();
                            $("#qrButton_" + self.getNewId).show();
                        }
                    }
                });
            },
            initChart: function (value) {
                let self = this
                let myChart = echarts.init(document.getElementById("mChart_" + self.getNewId));
                option = {
                    color: ['#2471CA', '#F1F1F1'],
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: ['50%', '60%'],
                        center: ['50%', '45%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                                value: value,
                                name: ''
                            },
                            {
                                value: 100 - value,
                                name: ''
                            },
                        ]
                    }]
                };
                myChart.setOption(option, true);
            },
            refreshCurrent: function (e, done) {
                var self = this;
                var $ = self.$$;
                if (done && e) {
                    setTimeout(function () {
                        self.getInfoData();
                        done();
                    }, 1000);
                }
            },
            buildRelateTask: function (data) {
                var self = this;
                var obj = {};
                obj.id = data.id;
                obj.name = data.name;
                obj.status = data.status;
                obj.maintainType = data.maintainType;
                obj.startTime = data.startTime;
                obj.endTime = data.endTime;
                self.relateTaskList[data.id] = obj;
            },
        },
        on: {
            pageInit: function (e, page) {
                let self = this;
                if (self.jumpFromPage == "allBUild") {
                    jQuery('#maintainInspectDetail-page_' + self.getNewId + ' .btn-buildDetail').hide()
                }
                self.getTestTaskStatus();
            },
        }
    }
</script>